<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>基于边缘计算的智行车载操控矩阵</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
      .module-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 80%;
            max-width: 1200px;
        }
      .module {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            flex-basis: calc(33.33% - 20px);
            box-sizing: border-box;
        }
      .sub-module {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        h1 {
            text-align: center;
            color: #333;
            width: 100%;
        }
        h2 {
            color: #007BFF;
            border-bottom: 1px solid #007BFF;
            padding-bottom: 5px;
        }
        h3 {
            color: #28a745;
        }
        p {
            margin: 5px 0;
        }
        b {
            color: #333;
        }
        i {
            margin-right: 10px;
        }
      .air-conditioner-module {
            display: flex;
            flex-direction: column;
        }
      .air-conditioner-module.sub-module {
            margin-bottom: 10px;
        }
        /* 自定义滑动开关的样式 */
      .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
      .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
      .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            border-radius: 34px;
            transition: 0.4s;
        }
      .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            border-radius: 50%;
            transition: 0.4s;
        }
        input:checked +.slider {
            background-color: #28a745;
        }
        input:checked +.slider:before {
            transform: translateX(26px);
        }
        /* 响应式布局 */
        @media (max-width: 768px) {
          .module-container {
                width: 90%;
            }
          .module {
                flex-basis: 100%;
            }
        }
        @media (max-width: 480px) {
          .module-container {
                width: 100%;
            }
        }
        /* 使 iframe 自适应 */
      .sub-module.iframe-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 比例，可根据需要修改 */
            height: 0;
            overflow: hidden;
        }
      .sub-module.iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<script>
    function getData() {
        var xhr = new XMLHttpRequest();
        var url = "";
        xhr.open("post", url, true);
        xhr.send("getData");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var z = xhr.responseText;
                console.log(z);
                var x = z.split(",");
                document.getElementById("200").textContent = x[0];
                document.getElementById("201").textContent = x[1];
                document.getElementById("202").textContent = x[2];
                document.getElementById("203").checked = x[3] == 1? true : false;
                document.getElementById("204").checked = x[4] == 1? true : false;
                document.getElementById("205").checked = x[5] == 1? true : false;
                document.getElementById("206").checked = x[6] == 1? true : false;
                document.getElementById("300").textContent = x[7];
                document.getElementById("301").textContent = x[8];
                document.getElementById("302").textContent = x[9];
                document.getElementById("303").textContent = x[10];
                document.getElementById("304").textContent = x[11];
                document.getElementById("305").textContent = x[12];
                // 初始化开关状态
                initSwitchStates();
            }
        }
    }
    setInterval(getData, 5000);

    function initSwitchStates() {
        var switchIds = ["203", "204", "205", "206"];
        switchIds.forEach(function (id) {
            var checkbox = document.querySelector('#' + id);
            if (checkbox) {
                checkbox.checked = checkbox.getAttribute('data-state') === '1';
            }
        });
    }

    function toggleSwitch(checkbox) {
        var state = checkbox.checked? "1" : "0";
        checkbox.setAttribute('data-state', state);
        // 发送开关状态到服务器
        sendSwitchStateToServer(checkbox.id, checkbox.checked);
    }

    function sendSwitchStateToServer(id, state) {
        var xhr = new XMLHttpRequest();
        var url = ""; // 替换为实际的服务器接口地址
        var  val = state === true? 1 : 0;
        xhr.open("post", url, true);
        // xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send("id="+id+"&val="+val);
        // xhr.send("putData,"+JSON.stringify({ key: id, val: state }));
    }
</script>
<body>
    <h1>首页</h1>
    <div class="module-container">
        <div class="module">
            <h2>车内数据</h2>
            <div class="sub-module">
                <i class="fas fa-thermometer-half"></i><p>温度: <b id="200">88</b></p>
            </div>
            <div class="sub-module">
                <i class="fas fa-tint"></i><p>湿度: <b id="201">88</b></p>
            </div>
            <div class="sub-module air-conditioner-module">
                <div class="sub-module">
                    <h3>空调</h3>
                </div>
                <div class="sub-module">
                    <i class="fas fa-snowflake"></i><p>空调温度:</p>
                    <b id="305">88</b>
                </div>
                <div class="sub-module">
                    <i class="fas fa-power-off"></i><p>空调开关:</p>
                    <label class="switch">
                        <input type="checkbox" id="205" onchange="toggleSwitch(this)" data-state="0">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            <div class="sub-module">
                <i class="fas fa-sun"></i><p>遮光板开关:</p>
                <label class="switch">
                    <input type="checkbox" id="203" onchange="toggleSwitch(this)" data-state="0">
                    <span class="slider"></span>
                </label>
            </div>
            <div class="sub-module">
                <i class="fas fa-tint-slash"></i><p>加湿器开关:</p>
                <label class="switch">
                    <input type="checkbox" id="204" onchange="toggleSwitch(this)" data-state="0">
                    <span class="slider"></span>
                </label>
            </div>
        </div>
        <div class="module">
            <h2>车外数据</h2>
            <div class="sub-module">
                <i class="fas fa-thermometer-half"></i><p>温度: <b id="300">88</b></p>
            </div>
            <div class="sub-module">
                <i class="fas fa-tint"></i><p>湿度: <b id="301">88</b></p>
            </div>
            <div class="sub-module">
                <i class="fas fa-lightbulb"></i><p>光照强度: <b id="302">88</b></p>
            </div>
            <div class="sub-module iframe-container">
                <iframe src="http://192.168.31.163:9900/stream_simple.html"></iframe>
            </div>
        </div>
        <div class="module">
            <h2>车辆数据</h2>
            <div class="sub-module">
                <i class="fas fa-battery-full"></i><p>电池电压: <b id="202">88</b></p>
            </div>
            <div class="sub-module">
                <i class="fas fa-tint"></i><p>水箱水量: <b id="304">88</b></p>
            </div>
            <div class="sub-module">
                <i class="fas fa-temperature-high"></i><p>发动机温度: <b id="303">88</b></p>
            </div>
            <div class="sub-module">
                <i class="fas fa-exclamation-triangle"></i><p>警报开关:</p>
                <label class="switch">
                    <input type="checkbox" id="206" onchange="toggleSwitch(this)" data-state="0">
                    <span class="slider"></span>
                </label>
            </div>
        </div>
    </div>
</body>
</html>